import React from "react";
import {Form, Card, Input, Button, message, Icon, Checkbox} from 'antd';

const FormItem = Form.Item;

class FormLogin extends React.Component {
    handleSubmit = () => {
        let userInfo = this.props.form.getFieldsValue(); // 获取表单的值
        this.props.form.validateFields((err, values) => { // 校验表单的值
            if (!err) {
                message.success(`hello,${userInfo.userName}, 密码为 ${userInfo.passWord}`)
            }
        })
    };

    render() {

        const {getFieldDecorator} = this.props.form;

        return (
            <div className="wrap">
                <Card title="登录行内表单">
                    <Form layout="inline">
                        <FormItem>
                            <Input placeholder="请输入用户名"/>
                        </FormItem>
                        <FormItem>
                            <Input type="password" placeholder="请输入密码"/>
                        </FormItem>
                        <FormItem>
                            <Button type="primary">登录</Button>
                        </FormItem>
                    </Form>
                </Card>
                <Card title="登录水平表单" style={{marginTop: 20}}>
                    <Form style={{width: 300}}>
                        <FormItem>
                            {
                                getFieldDecorator('userName', {
                                    initialValue: 'Jack',
                                    rules: [
                                        {required: true, message: '用户名不能为空'},
                                        {min: 5, max: 10, message: '长度不在范围之内'},
                                        {pattern: /^w+$/g, message: '用户必须为字母或者数字'}
                                    ]
                                })(
                                    <Input prefix={<Icon type="user"/>} placeholder="请输入用户名"/>
                                )
                            }
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('passWord', {
                                    initialValue: 'Jack',
                                    rules: []
                                })(
                                    <Input prefix={<Icon type="lock"/>} type="password" placeholder="请输入密码"/>
                                )
                            }
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('remember', {
                                    valuePropName:'checked',
                                    initialValue: true,
                                })(
                                    <Checkbox>记住密码</Checkbox>
                                )
                            }
                            <a href="https://github.com/hyyqcweb" style={{float:'right'}}>忘记密码</a>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" onClick={this.handleSubmit}>登录</Button>
                        </FormItem>
                    </Form>
                </Card>
            </div>
        )
    }
}

const FormFieldLogin = Form.create()(FormLogin);

export default FormFieldLogin;
